<template>
  <div class="app-container app-center">
    <h1 class="classification-title"> {{$t('HeaderItem2')}} </h1>
    <div style="min-width: 1200px;">
      <div>
        <el-row style="margin-left: -10px; margin-right: -10px;">
          <el-col :span="24" :xs="24" :sm="12" :md="12" :lg="12" :xl="12" v-for="(item, index) in category" :key="index"
            style="padding-left: 10px; padding-right: 10px;"
                  @click="handleItemClick(item.id)"
          >
            <el-row class="classification-item">
              <el-col :span="8" style="padding-left: 5px; padding-right: 5px;">
                <div class="cla-img">
                  <img
                      :src="item.img"
                      alt="">
                </div>
              </el-col>
              <el-col :span="15" style="padding-left: 5px; padding-right: 5px;">
                <div class="classification-item-text"><h2>{{ item.title }}</h2>
                  <div>
                    <span v-for="(subItem, subIndex) in item.sub" :key="subIndex">{{subItem}}&nbsp;</span>
                  </div>
                </div>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
<!--        <div class="el-row" style="margin-left: -10px; margin-right: -10px;">-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/f638f5c6-610e-4035-8a7d-1b49bd18a6ea.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Food &amp; Beverage</h2>-->
<!--                  <div>-->
<!--                    <span> Mineral Water </span><span> Juice </span><span> Carbonated Drinks </span><span> Jilk Drink </span><span> Tea </span><span> Beer </span><span> Liquor </span><span> Cocktail </span><span> Wine </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img">-->
<!--                  <img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/d80b2606-3bc7-47a2-bee9-d040619a34a6.jpg"-->
<!--                    alt="">-->
<!--                </div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Men's Clothing</h2>-->
<!--                  <div>-->
<!--                    <span> Tie </span><span> Bow Tie </span><span> Men's T-shirt </span><span> Men's Shirts </span><span> Men's Hat </span><span> Men's Underwear &amp; Socks </span><span> Men Belt </span><span> Men's Leather Jacket </span><span> Men's Tops </span><span> Men's Pajamas </span><span> Men's Jacket </span><span> Men's Suits </span><span> Men's Bottoms </span><span> Shoes For Men </span><span> Men's Formal Wear </span><span> Glasses &amp; Accessories </span><span> Sportswear </span><span> Windbreaker, jacket </span><span> Hat, gloves, scarf </span><span> Men's thermal underwear </span><span> Men's sweaters, knitwear </span><span> Jackets, down jackets </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/40488675-237a-40d9-b2d3-e5d53b0e6455.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Women's Clothing</h2>-->
<!--                  <div><span> Women's Shirt </span><span> Women's Shorts </span><span> Ladies Hat </span><span> Ladies Jeans </span><span> Ladies Skirt </span><span> Women's Top </span><span> Ladies Pajamas </span><span> Ladies Coat </span><span> Ladies Suit </span><span> Ladies Shoes </span><span> Women's Belts &amp; Belts </span><span> Women's Trousers </span><span> Sock </span><span> Glasses &amp; Sunglasses </span><span> Underwear </span><span> Gloves </span><span> Windbreaker, jacket </span><span> Hat, gloves, scarf </span><span> Women's thermal underwear </span><span> Women's sweaters, knitwear </span><span> Jackets, down jackets </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-04-14/d26d36b6-6435-4071-a1ed-647cf4e9214b.png"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Snack Dessert</h2>-->
<!--                  <div>-->
<!--                    <span> Backpack </span><span> Nut </span><span> Dessert </span><span> Cake </span><span> Jelly </span><span> Gluten </span><span> Ferky </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-04-14/fb09769f-95b0-4418-bc5a-8f91952ddf75.png"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Recreational Fishing Gear</h2>-->
<!--                  <div>-->
<!--                    <span> Lure </span><span> Fishing Rod </span><span> Fish Hook </span><span> Fishing Net </span><span> Fishing Line </span><span> Bait </span><span> Float </span><span> Sinker </span><span> Dip Net </span><span> Fishing Box </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/bfa34439-cd8b-4b7c-b849-8cd85c7b6a33.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Phones &amp; Accessories</h2>-->
<!--                  <div><span> Charger &amp; Charging Cable </span><span> Photo &amp; Pendant Accessories </span><span> Screen Protector </span><span> Cell Phone </span><span> Phone Cases &amp; Cases </span><span> Mobile Phone Repair Tool </span><span> Mobile Power </span><span> Mobile Phone Holder </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/2df406e9-dc70-492e-a7d5-4db89889fe58.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Epidemic Prevention Supplies</h2>-->
<!--                  <div><span> Protective Suit </span><span> Protective Mask </span><span> Protective Shoe Covers </span><span> Goggles </span><span> Alcohol &amp; Sanitizers </span><span> Thermometer </span><span> Disposable Gloves </span><span> Medical Masks </span><span> Medical Mask </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/97f3899d-51d4-4cd2-9720-0af99206dabb.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Office Stationery</h2>-->
<!--                  <div><span> Office Accessories </span><span> Small Office Appliances </span><span> Office Binding Supplies </span><span> Desk Storage Classification </span><span> Tapes Adhesives and Fasteners </span><span> Art Supplies </span><span> Calendar Goal Card </span><span> Writing &amp; Correcting Supplies </span><span> Stationery Stickers &amp; Labels </span><span> Mail &amp; Shipping Supplies </span><span> Paper &amp; Notebook </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/fd370537-bc59-4d31-a9c8-e7bbfebb9c9f.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Computer Peripherals</h2>-->
<!--                  <div>-->
<!--                    <span> Laptop </span><span> Printers &amp; Scanners </span><span> Computer Assembly Accessories </span><span> Keyboard &amp; Mouse </span><span> Networked Device </span><span> Tablet </span><span> Desktop </span><span> Projectors &amp; Accessories </span><span> Monitor </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-28/b95dc824-0d77-4013-a5b6-73fab1c9e4c5.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Digital Products</h2>-->
<!--                  <div>-->
<!--                    <span> Headphones &amp; Headphones </span><span> Other Smart Devices </span><span> Microphone </span><span> Speaker </span><span> Camera </span><span> Camera Accessories </span><span> Smart Watches &amp; Accessories </span><span> Smart Tracker </span><span> Home Theater System </span><span> TV Box </span><span> TVs &amp; Accessories </span><span> Video Game Equipment </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/d29f0843-33ad-4b3f-8a90-b56fc21b0e77.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Sports &amp; Outdoors</h2>-->
<!--                  <div><span> Winter Sports </span><span> Golf </span><span> Outdoor Generator </span><span> Outdoor Clothing &amp; Shoes </span><span> Outdoor Leisure </span><span> Fitness &amp; Bodybuilding </span><span> Travel Goods </span><span> Flashlight </span><span> Water Sports </span><span> Camping Equipment </span><span> Fishing Gear </span><span> hiking &amp; Rock Climbing </span><span> Sports Protective Equipment </span><span> Men's Sportswear </span><span> Sportswear </span><span> Bicycle Accessories </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/b07acf47-c478-464b-b17a-ba9226a7e00e.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Home Appliances</h2>-->
<!--                  <div><span> Kitchen Appliances </span><span> Furniture Cupboard </span><span> Fans &amp; Air Conditioning Equipment </span><span> Home Appliance Accessories </span><span> Home Audio &amp; Theater </span><span> Water Purification Equipment </span><span> Air Purifier </span><span> Cleaning Equipment </span><span> Washing &amp; Drying Appliances </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/d2355e87-0f42-48d3-9924-966b9fd8d2e0.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Health Beauty &amp; Hair</h2>-->
<!--                  <div><span> Deodorants &amp; Antiperspirants </span><span> Makeup Tools </span><span> Cosmetic </span><span> Lipstick </span><span> The Face </span><span> Nail Supplies </span><span> Beauty Equipment </span><span> Skin Care </span><span> Razor &amp; Hair Removal </span><span> Hair care &amp; Styling </span><span> Health Care </span><span> Dental &amp; Oral Care </span><span> Eyes &amp; Eyelashes </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/06f91542-f535-445e-b3aa-04e3fb05fe8a.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Kids &amp; Babies</h2>-->
<!--                  <div><span> Baby Clothes </span><span> Baby &amp; Mother </span><span> Milk powder </span><span> Belly bandage </span><span> Saliva napkins, food clothes </span><span> Diapers </span><span> Gloves and feet </span><span> Baby hats </span><span> Baby cart </span><span> Baby Toys </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/e1158c3f-a786-4374-aab7-3f4dac76589d.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Jewelry &amp; Watches</h2>-->
<!--                  <div><span> Ladies Watch </span><span> Men's Watch </span><span> Jewelry </span><span> Necklaces &amp; Pendants </span><span> Ladies Bracelet </span><span> Earrings </span><span> Ring </span><span> Anklet </span><span> Tiaras &amp; Brooches </span><span> Jewelry Set </span><span> Keychains &amp; Trinkets </span><span> Couple Watches </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-04-14/a8ed7145-c86e-4506-8da2-b8b27f610db4.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Kids Toys</h2>-->
<!--                  <div><span> Plush Toy </span><span> Metal Toys </span><span> Wooden Toys </span><span> Enlightenment Toys </span><span> Plastic Toys </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-08-14/29e5a33a-f02d-43f6-b4ce-5edb8be1577a.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Luxury</h2>-->
<!--                  <div><span> Bags </span><span> Skin care products </span><span> Clothing </span><span> Watches </span><span> Art </span><span> Jewelry </span><span> Cosmetics </span><span> Perfume </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-12-18/3433252d-5785-4f42-ab41-f9dad872472f.png"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Holiday decoration</h2>-->
<!--                  <div><span> Christmas Decorations </span><span> Spring Festival Decorations </span><span> Valentine Day Decoration </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-11-01/b1365176-2126-4b52-893a-d823ba7fa752.png"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Children's clothing</h2>-->
<!--                  <div><span> Children's Bag </span><span> Boy's Clothing </span><span> Boy's Pants </span><span> Boys Underwear &amp; Socks </span><span> Boys Tops &amp; T-Shirts </span><span> Boy's Pajamas </span><span> Boy's Jacket </span><span> Boys Shoes </span><span> Girls Clothing </span><span> Girls Pants </span><span> Girls Underwear &amp; Socks </span><span> Girls Skirt </span><span> Girls Tops &amp; T-Shirts </span><span> Girls Pajamas </span><span> Girls Suit </span><span> Girls Jacket </span><span> Girls Shoes </span><span> Girls Accessories </span><span> Boys Accessories </span><span> Boys clothing </span><span> Girls clothing </span><span> Dress up props </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--          <div class="el-col el-col-24 el-col-xs-24 el-col-sm-12 el-col-md-12 el-col-lg-12 el-col-xl-12"-->
<!--               style="padding-left: 10px; padding-right: 10px;">-->
<!--            <div class="classification-item el-row is-align-middle el-row&#45;&#45;flex"-->
<!--                 style="margin-left: -5px; margin-right: -5px;">-->
<!--              <div class="el-col el-col-8" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="cla-img"><img-->
<!--                    src="https://hetao-shop-test.s3.amazonaws.com/type/2023-04-14/9f9c23cc-7abd-41ee-a116-01eed9d588a5.jpg"-->
<!--                    alt=""></div>-->
<!--              </div>-->
<!--              <div class="el-col el-col-15" style="padding-left: 5px; padding-right: 5px;">-->
<!--                <div class="classification-item-text"><h2>Men's Bag</h2>-->
<!--                  <div>-->
<!--                    <span> Men's Backpack </span><span> Men's Shoulder Bag </span><span> Men's Briefcase </span><span> Men's Wallet </span><span> Suitcase </span>-->
<!--                  </div>-->
<!--                </div>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </div>&lt;!&ndash;&ndash;&gt;-->
      </div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const category = [
  {
    id: 1,
    img: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/f638f5c6-610e-4035-8a7d-1b49bd18a6ea.jpg',
    title: '饮品酒水',
    sub: ['矿泉水', '果汁', '碳酸饮料', '乳饮', '茶类', '啤酒', '白酒', '鸡尾酒', '葡萄酒']
  },
  {
    id: 2,
    img: 'https://hetao-shop-test.s3.amazonaws.com/type/2023-03-29/d80b2606-3bc7-47a2-bee9-d040619a34a6.jpg',
    title: '男士服装',
    sub: ['领带', '领结', '男士衬衫', '男士帽子', '男士皮带', '针织衫', '外套', '羽绒服', '男士毛衣']
  }
]
const handleItemClick = (id) => {
  router.push({path: '/product', query: { id: id }})
}
</script>
<style scoped lang="scss">
.classification-title {
  font-weight: 700;
  font-size: 24px;
  color: var(--color-title);
  margin: 24px 0px;
}

.classification-item {
  border: 1px solid var(--color-border);
  padding: 24px;
  border-radius: 4px;
  height: 234px;
  cursor: pointer;
  margin: 0px 0px 20px !important;
}

.classification-item .el-col {
  height: 100%;
}

.classification-item .cla-img {
  height: 170px;
  width: 170px;
  overflow: hidden;
  margin-right: 10px;
}

.classification-item .cla-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.classification-item-text h2 {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-title);
  margin-bottom: 14px;
}

.classification-item-text p {
  font-weight: 400;
  font-size: 13px;
  color: rgb(51, 51, 51);
  line-height: 1.5;
  overflow: hidden;
  height: 140px;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
}

.classification-item-text span:hover {
  color: var(--color-price);
  font-size: 15px;
}

</style>